<template>
  <div class="wrapper">
    <el-card>
      <div class="rowDiv">
        <div class="row-left">
          <div class="row-item">
            物流商类型:<el-select
              v-model="state.waretype"
              placeholder="选择物流商类型"
              clearable
            >
              <el-option label="总部物流" value="001"></el-option>
              <el-option label="门店物流" value="002"></el-option>
            </el-select>
          </div>
        </div>

        <div class="row-right">
          <searchDiv
            :placeholder="state.placeholder"
            @searchClick="searchClick"
          ></searchDiv
          >&nbsp;
          <el-button type="primary" @click="createDepartment()"
            >创建物流商
          </el-button>
        </div>
      </div>
      <!-- 页面加载 -->
      <el-table
        class="text-center"
        :data="state.tableData"
        :align="center"
        style="width: 100%; margin-top: 20px"
      >
        <el-table-column
          prop="id"
          label="物流商编号"
          width="100"
        ></el-table-column>
        <el-table-column prop="name" label="物流商名称"></el-table-column>
        <el-table-column prop="note" label="备注"></el-table-column>
        <el-table-column prop="code" label="编码"></el-table-column>
        <el-table-column prop="" label="发货单数"> </el-table-column>
        <el-table-column prop="" label="物流商类型"> </el-table-column>
        <el-table-column label="关联仓库">
          <template v-slot="scope">
            <div v-for="child in scope.row.warehouse_list" :key="child.id">
              {{ child.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否启用">
          <template v-slot="scope">
            <!-- <div @click="change_Switch($event, scope.row)">
              <el-switch
                v-model="scope.row.all_store"
                :active-value="1"
                :inactive-value="0"
                active-text="开启"
                inactive-text="关闭"
                active-color="#13ce66"
                inactive-color="#ff4949"
              ></el-switch>
            </div> -->
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              @click.native.prevent="bind_store(scope.row)"
              type="text"
              size="small"
            >
              关联仓库
            </el-button>
            <el-button
              @click.native.prevent="edit_depart(scope.row)"
              type="text"
              size="small"
            >
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 创建物流商 -->
      <el-dialog
        :title="state.good_title"
        v-model="state.depart_dialogVisible"
        width="18%"
        center
      >
        <span>
          <el-form
            :model="state.form"
            :rules="state.rules"
            ref="form"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="名称" prop="log_name">
              <el-input type="text" v-model="state.form.log_name"></el-input>
            </el-form-item>
            <el-form-item label="编码" prop="code">
              <el-input type="text" v-model="state.form.code"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="state.form.note"></el-input>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.depart_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="create()">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 关联仓库 -->
      <el-dialog
        title="关联仓库"
        v-model="state.ware_dialogVisible"
        width="18%"
        center
      >
        <span>
          <el-form
            :model="state.form"
            :rules="state.rules"
            ref="form"
            label-width="60px"
            class="demo-ruleForm"
          >
            <el-form-item label="名称" prop="ware_Arr">
              <el-select type="text" multiple v-model="state.chose_ware">
                <template v-for="item in state.ware_Arr" :key="item.id">
                  <el-option
                    :label="item.name"
                    :value="item.warehouse_id"
                  ></el-option>
                </template>
              </el-select>
            </el-form-item>
          </el-form>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="state.ware_dialogVisible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="sub_bind_store()">提交</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted, getCurrentInstance, reactive } from "vue";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";
import Page from "@/components/Pagination.vue";
import searchDiv from "@/components/Search.vue";

export default {
    name:"logistics_manager",
  components: {
    Page,
    searchDiv,
  },
  setup() {
    let form = ref(null);
    let multipleTable = ref(null);
    const { ctx } = getCurrentInstance();
    let router = useRouter();
    let state = reactive({
      placeholder: "",
      common_type: "",
      common_id: "",
      chose_ware: [],
      ware_Arr: [],
      ware_dialogVisible: false,
      depart_dialogVisible: false,
      form: {
        log_name: "",
        code: "",
        charge_man: "",
      },
      rules: {
        log_name: [
          { required: true, message: "请填写物流名称", trigger: "blur" },
        ],
        code: [{ required: true, message: "请填写编码", trigger: "blur" }],
      },
    });
    onMounted(() => {
      getOrderlist();
      getWarelist();
    });
    // 搜索事件
    function searchClick(item) {
      state.keyword = item;
      getOrderlist();
    }

    //   创建部门
    function createDepartment() {
      state.common_type = "创建";
      state.common_id = "";
      state.depart_dialogVisible = true;
      state.form.log_name = "";
      state.form.code = "";
      state.form.note = "";
    }

    // 删除部门
    function deleteRow(item) {
      if (confirm("是否要删除?")) {
        ctx.$http
          .post("/tanxiaji/position/department/del/", {
            id: item.id,
          })
          .then((res) => {
            if (res.errno == 0) {
              ElNotification.success(res.errmsg);
              getOrderlist();
            } else {
              ElNotification.error(res.errmsg);
            }
          })
          .catch((err) => {
            ElNotification.error(err);
          });
      }
    }

    //获取列表
    function getOrderlist() {
      ctx.$http
        .get("/tanxiaji/erp/warehouse/express/list/", { index: state.page,keywords:state.keyword})
        .then((res) => {
          if (res.errno == 0) {
            state.tableData = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 获取仓库
    function getWarelist() {
      ctx.$http
        .get("/tanxiaji/erp/depot/ajax/search/", { type: 1 })
        .then((res) => {
          if (res.errno == 0) {
            state.ware_Arr = res.data;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }
    // 绑定仓库
    function bind_store(item) {
      state.ware_dialogVisible = true;
      let warelist = item.warehouse_list;
      state.common_id = item.id;
      if (warelist.length) {
        warelist.filter((v) => state.chose_ware.push(v.warehouse_id));
      } else {
        state.chose_ware = [];
      }
    }
    // 编辑部门
    function edit_depart(item) {
      state.common_type = "编辑";
      state.common_id = item.id;
      state.depart_dialogVisible = true;
      state.form.log_name = item.name;
      state.form.code = item.code;
      state.form.note = item.note;
    }
    //    提交物流商
    function create() {
      let url = "";
      let data = "";
      if (state.common_type == "创建") {
        url = "/tanxiaji/erp/warehouse/express/add/";
        data = {
          name: state.form.log_name,
          code: state.form.code,
          note: state.form.note,
        };
      } else {
        url = "/tanxiaji/erp/warehouse/express/edit/";
        data = {
          id: state.common_id,
          name: state.form.log_name,
          code: state.form.code,
          note: state.form.note,
        };
      }
      form.value.validate((valid) => {
        if (valid) {
          ctx.$http
            .post(url, data)
            .then((res) => {
              if (res.errno == 0) {
                ElNotification.success(res.errmsg);
                state.depart_dialogVisible = false;
                getOrderlist();
              } else {
                ElNotification.error(res.errmsg);
              }
            })
            .catch((err) => {
              ElNotification.error(err);
            });
        } else {
        }
      });
    }
    // 提交绑定的门店
    function sub_bind_store() {
      ctx.$http
        .post("/tanxiaji/erp/warehouse/express/warehouse_mapping/", {
          id: state.common_id,
          warehouses_ids: JSON.stringify(state.chose_ware),
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
            state.ware_dialogVisible=false;
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    // 修改开关
    function change_Switch(e, data) {
      ctx.$http
        .post("/tanxiaji/position/department/store_switch/", {
          id: data.id,
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            getOrderlist();
          } else {
            getOrderlist();
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    return {
      form,
      searchClick,
      state,
      getOrderlist,
      createDepartment,
      create,
      edit_depart,
      deleteRow,
      change_Switch,
      bind_store,
      sub_bind_store,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  .btnGroup {
    width: 30%;
    margin: 20px auto;
    display: flex;
    justify-content: space-between;
  }
  .el-table /deep/ th {
    background-color: #eaeaea;
    text-align: center;
  }
  .el-table /deep/ td {
    text-align: center;
  }
}
</style>